<template>
  <section>
    <div class="shop-cart">
      <!--购物车-->
      <div class="content">
        <div class="content-left" @click="fnListShow">
          <div class="logo-wrapper">
            <div class="logo" :class="{'high-light' : totalCount>0}">
              <span class="icon-shopping_cart"></span>
            </div>
            <div class="count-flg" v-show="totalCount>0">{{totalCount}}</div>
          </div>
          <div class="price" :class="{'high-light' : totalPrice>0}">¥{{totalPrice}}</div>
          <div class="desc">另需配送费¥{{deliveryPrice}}元</div>
        </div>
        <div class="content-right" @click="fnPay">
          <div class="pay" :class="this.totalPrice >= this.minPrice?'enough':'not-enough'">{{payDesc}}</div>
        </div>
      </div>
      <!--抛物线小球-->
      <div class="ball-content">
        <transition name="drop" v-for="(item,index) in balls" :key="index" @before-enter="beforeEnter" @enter="enter"
                    @after-enter="afterEnter">
          <div class="ball" v-show="item.show">
            <div class="inner inner-hook"></div>
          </div>
        </transition>
      </div>
      <!--购物车(已选商品)列表-->
      <transition name="fold">
        <div class="shop-cart-list" v-show="listShow">
          <div class="head">
            <span class="title">购物车</span>
            <span class="clear" @click="fnClear">清空</span>
          </div>
          <div class="content" ref="shopCartList">
            <ul>
              <li class="content-item" v-for="item in selectFoods">
                <div class="name">{{item.name}}</div>
                <div class="price">
                  <span class="total"><span>¥</span>{{item.price * item.count}}</span>
                  <cart-control :food="item"></cart-control>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </transition>
    </div>
    <!--购物车列表 遮罩层-->
    <div class="list-mask" @click="fnListShow" v-show="listShow"></div>
  </section>
</template>

<script type="text/ecmascript-6">
  import CartControl from '../cartcontrol/CartControl'
  import BScroll from 'better-scroll'

  export default {
    props: {
      deliveryPrice: {
        type: Number,
        default: 0
      },
      minPrice: {
        type: Number,
        default: 0
      },
      selectFoods: {
        type: Array,
        default () {
          return []
        }
      },
      cartCtlTarget: ''
    },
    data () {
      return {
        balls: [
          {
            show: false
          },
          {
            show: false
          },
          {
            show: false
          },
          {
            show: false
          },
          {
            show: false
          }
        ],
        // 控制购物车(已选商品)列表是否显示
        listShow: false
      }
    },
    computed: {
      // 商品总价
      totalPrice () {
        let sum = 0
        for (let i = 0; i < this.selectFoods.length; i++) {
          let item = this.selectFoods[i]
          sum += item.price * item.count
        }

        // 总价为0时,隐藏列表
        if (sum === 0) {
          this.listShow = false
        }

        return sum
      },
      // 商品总数
      totalCount () {
        let total = 0
        for (let i = 0; i < this.selectFoods.length; i++) {
          let item = this.selectFoods[i]
          total += item.count
        }
        return total
      },
      // 结算按钮的三种状态
      payDesc () {
        if (this.totalPrice === 0) {
          return `¥${this.minPrice}元起送`
        } else if (this.totalPrice < this.minPrice) {
          let diff = this.minPrice - this.totalPrice
          return `还差¥${diff}元起送`
        } else {
          return '去结算'
        }
      }
    },
    components: {
      CartControl
    },
    methods: {
      // 抛物线小球动画
      fnDrop (el) {
        for (let i = 0; i < this.balls.length; i++) {
          let ball = this.balls[i]
          if (!ball.show) {
            ball.show = true
            ball.el = el
            return
          }
        }
      },
      beforeEnter (el) {
        let count = this.balls.length
        while (count--) {
          let ball = this.balls[count]
          if (ball.show) {
            let rect = ball.el.getBoundingClientRect()
            let x = rect.left - 32
            let y = -(window.innerHeight - rect.top - 22)
            el.style.display = ''
            el.style.webkitTransform = `translate3d(0,${y}px,0)`
            el.style.transform = `translate3d(0,${y}px,0)`
            let inner = el.getElementsByClassName('inner-hook')[0]
            inner.style.webkitTransform = `translate3d(${x}px,0,0)`
            inner.style.transform = `translate3d(${x}px,0,0)`
          }
        }
      },
      enter (el) {
        /* eslint-disable no-unused-vars */
        let refresh = el.offsetHeight
        this.$nextTick(() => {
          el.style.webkitTransform = 'translate3d(0,0,0)'
          el.style.transform = 'translate3d(0,0,0)'
          let inner = el.getElementsByClassName('inner-hook')[0]
          inner.style.webkitTransform = 'translate3d(0,0,0)'
          inner.style.transform = 'translate3d(0,0,0)'
        })
      },
      afterEnter (el) {
        this.balls.forEach((ball) => {
          ball.show = false
        })
        el.style.display = 'none'
      },
      // 控制是否展示购物车列表
      fnListShow () {
        var that = this
        if (!that.totalPrice) {
          that.listShow = false
        } else {
          that.listShow = !that.listShow
          if (that.listShow) {
            that.$nextTick(() => {
              if (!that.listScroll) {
                that.listScroll = new BScroll(that.$refs.shopCartList, {
                  click: true
                })
              } else {
                that.listScroll.refresh()
              }
            })
          }
        }
      },
      // 清空购物车列表
      fnClear () {
        this.selectFoods.forEach((food) => {
          food.count = 0
        })
      },
      // 去结算
      fnPay () {
        if (this.totalPrice < this.minPrice) {
          return
        }

        window.alert(`需要支付${this.totalPrice}元!`)
      }
    }
  }
</script>

<style lang="scss" scoped>
  /* 购物车 */
  .shop-cart {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: 100%;
    height: 46px;

    /* 购物车 */
    .content {
      background: #141d27;
      display: flex;

      .content-left {
        flex: 1;
        font-size: 0;

        .logo-wrapper {
          display: inline-block;
          position: relative;
          left: 0;
          bottom: 10px;
          width: 56px;
          height: 56px;
          box-sizing: border-box;
          border-radius: 50%;
          background: #141d27;
          padding: 6px;
          margin: 0 12px;
          .logo {
            width: 100%;
            height: 100%;
            background: #2b343c;
            border-radius: 50%;
            text-align: center;
            &.high-light {
              background: rgb(0, 160, 220);
              .icon-shopping_cart {
                color: rgb(255, 255, 255);
              }
            }
            .icon-shopping_cart {
              font-size: 24px;
              color: rgba(255, 255, 255, 0.4);
              line-height: 44px;
            }
          }
          .count-flg {
            position: absolute;
            top: 0;
            right: 0;
            width: 24px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            background: rgb(240, 20, 20);
            box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, .4);
            font-size: 9px;
            font-weight: 900;
            color: rgb(255, 255, 255);
            border-radius: 16px;
          }
        }

        .price {
          display: inline-block;
          font-size: 16px;
          color: rgba(255, 255, 255, 0.4);
          font-weight: 700;
          line-height: 24px;
          margin-top: 12px;
          padding-right: 12px;
          border-right: 1px solid rgba(255, 255, 255, 0.1);
          vertical-align: top;
          &.high-light {
            color: rgb(255, 255, 255);
          }
        }

        .desc {
          display: inline-block;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.4);
          margin: 12px 0 0 12px;
          line-height: 24px;
          vertical-align: top;
        }
      }

      .content-right {
        flex: 0 0 105px;
        width: 105px;
        .pay {
          width: 100%;
          height: 100%;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.4);
          font-weight: 700;
          line-height: 24px;
          padding-top: 12px;
          text-align: center;
          &.not-enough {
            background: #2b333b;
          }
          &.enough {
            background: #00b43c;
            color: #fff;
          }
        }
      }
    }

    /* 抛物线小球动画 */
    .ball-content {
      .ball {
        position: fixed;
        left: 32px;
        bottom: 22px;
        transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
        .inner {
          width: 18px;
          height: 18px;
          background: rgb(0, 160, 220);
          border-radius: 50%;
          transition: all 0.4s linear;
        }
      }
    }

    /* 购物车(已选商品)列表 */
    .shop-cart-list {
      position: absolute;
      bottom: 46px;
      left: 0;
      z-index: -1;
      width: 100%;
      transition: all 0.3s linear;
      &.fold-enter-active, &.fold-leave {
        transform: translate3d(0, 0, 0);
      }
      &.fold-enter, &.fold-leave-active {
        transform: translate3d(0, 100%, 0);
      }

      .head {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background: #f3f5f7;
        padding: 0 18px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(7, 17, 27, .1);
        display: flex;
        justify-content: space-between;
        .title {
          font-size: 14px;
          font-weight: 200;
          color: rgb(7, 17, 27);
        }
        .clear {
          font-size: 12px;
          color: rgb(0, 160, 220);
        }
      }
      .content {
        width: 100%;
        max-height: 217px; // 高度不能定死,否则better-scroll不生效
        overflow: hidden;
        padding: 0 18px;
        box-sizing: border-box;
        background: rgb(255, 255, 255);
        ul {
          width: 100%;
          height: 100%;
          .content-item {
            width: 100%;
            height: 48px;
            padding: 12px 0;
            box-sizing: border-box;
            border-bottom: 1px solid rgba(7, 17, 27, .1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name {
              font-size: 14px;
              color: rgb(7, 17, 27);
            }
            .price {
              display: flex;
              align-items: center;
              .total {
                padding: 0 12px 0 18px;
                font-size: 14px;
                font-weight: 700;
                color: rgb(240, 20, 20);
                span {
                  font-size: 10px;
                  font-weight: normal;
                }
              }
            }
          }
        }
      }
    }
  }

  /* 购物车列表 遮罩 */
  .list-mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 40;
    backdrop-filter: blur(10px);
    background: rgba(7, 17, 27, .6);
  }
</style>
